import React,{createContext,useContext} from 'react'
import { matchPath, useLocation,useOutlet } from 'react-router-dom'

interface KeepAliveProps {
    keepPath: string[],
    children: React.ReactNode
}

//用来缓存组件的对象
const keepElements: Record<string, any> = {}
const KeepAliveContext=createContext({ //useContext 可以识别的对象
  keepPath:[] as string[],
  keepElements,
  dropByPath(path: string){
    keepElements[path] = null
  }
})

export default function KeepAlive(props: KeepAliveProps) {
  const {keepPath} = props  

  const {keepElements,dropByPath} =useContext(KeepAliveContext)
  return (
    <KeepAliveContext.Provider value={{keepPath,keepElements,dropByPath}}>
      {props.children}
    </KeepAliveContext.Provider>
  )
}

const isKeepPath = (keepPath: string[], path: string) => {
  return keepPath.includes(path)
}
export function useKeepOutlet(){
  const location=useLocation() 
  const element =useOutlet() //拿到在二级路由出口展示的组件
  const {keepPath,keepElements} =useContext(KeepAliveContext)
  const isKeep = isKeepPath(keepPath,location.pathname)//当前展示的组件是否要被缓存
  if(isKeep){
    keepElements[location.pathname] = element
  }
  return <>
    {
      Object.entries(keepElements).map(([pathname,element])=>(
        <div key={pathname} 
        className='keep-alive-page'
        style={{overflow:'hidden'}}
        hidden={!matchPath(location.pathname,pathname)}
        >
          {element}
        </div>
      ))
    }
  </>
}